<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    

    <ui:composition template="/template/template2.xhtml">
        <ui:define name="title">
            <h:outputText value="#{bundle.CreateAccountTitle}"></h:outputText>
        </ui:define>
        <ui:define name="content">
             <div class="panel-wrapper fixed">
                <ul class="breadcrumbs-navigation">
                    <li><h:link outcome="List">Dashboard</h:link></li>
                    <li><h:link outcome="List">Account Management</h:link></li>
                    
                </ul>
            </div>

            <div class="panel-wrapper fixed">
                <div id="msg_error">

                </div>
                <div class="panel ">
                    <div class="title">
                        <h4>Create Account</h4>
                    </div>
                    <div class="content">
            <h:panelGroup id="messagePanel" layout="block">
                <h:messages errorStyle="color: red" infoStyle="color: green" layout="table"/>
            </h:panelGroup>
              <h:form>
                       
                        
                      <h:outputLabel style="float:left;width:20%;float:left;height:35px;line-height:35px;"  >User Name: <span style="color: red;">*</span></h:outputLabel>
                    <p:inputText  style="float:left;width:50%;float:left;height:26px;padding:4px 12px;border:1px solid #d0d0d0;border-radius:4px;
                                             box-shadow:inset 0px 1px 3px 0 rgba(0,0,0,0.2), 1px 2px 3px 0 rgba(0,0,0,0.1);font-family:Arial, Verdana;
                                             color:#565656;font-size:12px;transition: box-shadow 0.3s;-moz-transition: box-shadow 0.3s;-webkit-transition: box-shadow 0.3s;
                                             -o-transition: box-shadow 0.3s;"
                        id="username" value="#{accountController.selected.username}" title="#{bundle.EditAccountTitle_username}" required="true" requiredMessage="#{bundle.EditAccountRequiredMessage_username}"/>
<br/><br/>
                    <h:outputLabel style="float:left;width:20%;float:left;height:35px;line-height:35px;"  >Password: <span style="color: red;">*</span></h:outputLabel>
                    <p:inputText  style="float:left;width:50%;float:left;height:26px;padding:4px 12px;border:1px solid #d0d0d0;border-radius:4px;
                                             box-shadow:inset 0px 1px 3px 0 rgba(0,0,0,0.2), 1px 2px 3px 0 rgba(0,0,0,0.1);font-family:Arial, Verdana;
                                             color:#565656;font-size:12px;transition: box-shadow 0.3s;-moz-transition: box-shadow 0.3s;-webkit-transition: box-shadow 0.3s;
                                             -o-transition: box-shadow 0.3s;"
                        id="password" value="#{accountController.selected.password}" title="#{bundle.EditAccountTitle_password}" required="true" requiredMessage="#{bundle.EditAccountRequiredMessage_password}"/>
<br/><br/>
                   <h:outputLabel style="float:left;width:20%;float:left;height:35px;line-height:35px;"  >Role ID: <span style="color: red;">*</span></h:outputLabel>
                    <p:selectOneMenu  style="float:left;width:20%;float:left;height:26px;padding:4px 12px;border:1px solid #d0d0d0;border-radius:4px;
                                             box-shadow:inset 0px 1px 3px 0 rgba(0,0,0,0.2), 1px 2px 3px 0 rgba(0,0,0,0.1);font-family:Arial, Verdana;
                                             color:#565656;font-size:12px;transition: box-shadow 0.3s;-moz-transition: box-shadow 0.3s;-webkit-transition: box-shadow 0.3s;
                                             -o-transition: box-shadow 0.3s;"
                        id="roleid" value="#{accountController.selected.roleId}" title="#{bundle.EditAccountTitle_roleid}" required="true" requiredMessage="#{bundle.EditAccountRequiredMessage_roleid}">
                        <f:selectItems value="#{roleController.itemsAvailableSelectOne}"/>
                    </p:selectOneMenu>
    <br/><br/>                
                   <h:outputLabel style="float:left;width:20%;float:left;height:35px;line-height:35px;"  >Full Name: <span style="color: red;">*</span></h:outputLabel>
                    <p:inputText  style="float:left;width:50%;float:left;height:26px;padding:4px 12px;border:1px solid #d0d0d0;border-radius:4px;
                                             box-shadow:inset 0px 1px 3px 0 rgba(0,0,0,0.2), 1px 2px 3px 0 rgba(0,0,0,0.1);font-family:Arial, Verdana;
                                             color:#565656;font-size:12px;transition: box-shadow 0.3s;-moz-transition: box-shadow 0.3s;-webkit-transition: box-shadow 0.3s;
                                             -o-transition: box-shadow 0.3s;"
                        id="fullname" value="#{accountController.user.fullname}" required="true" requiredMessage="Required!"/>
<br/><br/>
                    
                 
                   <h:outputLabel style="float:left;width:20%;float:left;height:35px;line-height:35px;"  >Birthday: <span style="color: red;">*</span></h:outputLabel>
                    <p:calendar onblur='setMess("j_idt41:j_idt49");' value="#{accountController.user.birthday}" 
                                 style="float:left;width:25%;float:left;height:26px;padding:4px 12px;border:1px solid #d0d0d0;border-radius:4px;
                                             box-shadow:inset 0px 1px 3px 0 rgba(0,0,0,0.2), 1px 2px 3px 0 rgba(0,0,0,0.1);font-family:Arial, Verdana;
                                             color:#565656;font-size:12px;transition: box-shadow 0.3s;-moz-transition: box-shadow 0.3s;-webkit-transition: box-shadow 0.3s;
                                             -o-transition: box-shadow 0.3s;"
                                id="dateofbirth" showOn="button">  
                        
                    </p:calendar>
     <br/><br/>               
                    
                <h:outputLabel style="float:left;width:20%;float:left;height:35px;line-height:35px;"  >Gender: <span style="color: red;">*</span></h:outputLabel>
                    <p:selectOneRadio  style="float:left;width:50%;float:left;height:26px;padding:4px 12px;border:1px solid #d0d0d0;border-radius:4px;
                                             box-shadow:inset 0px 1px 3px 0 rgba(0,0,0,0.2), 1px 2px 3px 0 rgba(0,0,0,0.1);font-family:Arial, Verdana;
                                             color:#565656;font-size:12px;transition: box-shadow 0.3s;-moz-transition: box-shadow 0.3s;-webkit-transition: box-shadow 0.3s;
                                             -o-transition: box-shadow 0.3s;"
                        id="gender" value="#{accountController.user.gender}">  
                        <f:selectItem itemLabel="Male" itemValue="True" />  
                        <f:selectItem itemLabel="Female" itemValue="False" />  
                    </p:selectOneRadio>  
<br/><br/>
                    <h:outputLabel style="float:left;width:20%;float:left;height:35px;line-height:35px;"  >Address: <span style="color: red;">*</span></h:outputLabel>
                    <p:inputText  style="float:left;width:50%;float:left;height:26px;padding:4px 12px;border:1px solid #d0d0d0;border-radius:4px;
                                             box-shadow:inset 0px 1px 3px 0 rgba(0,0,0,0.2), 1px 2px 3px 0 rgba(0,0,0,0.1);font-family:Arial, Verdana;
                                             color:#565656;font-size:12px;transition: box-shadow 0.3s;-moz-transition: box-shadow 0.3s;-webkit-transition: box-shadow 0.3s;
                                             -o-transition: box-shadow 0.3s;"
                        id="address" value="#{accountController.user.address}" required="true" requiredMessage="Required!"/>
<br/><br/>
                    <h:outputLabel style="float:left;width:20%;float:left;height:35px;line-height:35px;"  >Email: <span style="color: red;">*</span></h:outputLabel>
                    <p:inputText  style="float:left;width:50%;float:left;height:26px;padding:4px 12px;border:1px solid #d0d0d0;border-radius:4px;
                                             box-shadow:inset 0px 1px 3px 0 rgba(0,0,0,0.2), 1px 2px 3px 0 rgba(0,0,0,0.1);font-family:Arial, Verdana;
                                             color:#565656;font-size:12px;transition: box-shadow 0.3s;-moz-transition: box-shadow 0.3s;-webkit-transition: box-shadow 0.3s;
                                             -o-transition: box-shadow 0.3s;"
                        id="email" value="#{accountController.user.email}" required="true" requiredMessage="Required!"/>
<br/><br/>
                    <h:outputLabel style="float:left;width:20%;float:left;height:35px;line-height:35px;"  >Phone: <span style="color: red;">*</span></h:outputLabel>
                    <p:inputText  style="float:left;width:50%;float:left;height:26px;padding:4px 12px;border:1px solid #d0d0d0;border-radius:4px;
                                             box-shadow:inset 0px 1px 3px 0 rgba(0,0,0,0.2), 1px 2px 3px 0 rgba(0,0,0,0.1);font-family:Arial, Verdana;
                                             color:#565656;font-size:12px;transition: box-shadow 0.3s;-moz-transition: box-shadow 0.3s;-webkit-transition: box-shadow 0.3s;
                                             -o-transition: box-shadow 0.3s;"
                        id="phone" value="#{accountController.user.phone}" required="true" requiredMessage="Required!"/>
                    <br/><br/>
                    
                    <h:outputLabel style="float:left;width:20%;float:left;height:35px;line-height:35px;"  >Avatar: <span style="color: red;">*</span></h:outputLabel>
                      <p:fileUpload style="float:left;width:25%;float:left;height:26px;padding:4px 12px;border:1px solid #d0d0d0;border-radius:4px;
                                             box-shadow:inset 0px 1px 3px 0 rgba(0,0,0,0.2), 1px 2px 3px 0 rgba(0,0,0,0.1);font-family:Arial, Verdana;
                                             color:#565656;font-size:12px;transition: box-shadow 0.3s;-moz-transition: box-shadow 0.3s;-webkit-transition: box-shadow 0.3s;
                                             -o-transition: box-shadow 0.3s;"
                                             id="avatar" value="#{accountController.user.avatar}" mode="simple" sizeLimit="500000"   
                                              allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
                         <br/><br/>
                           <div class="content spacing" style="margin-left: 200px;">

                               <h:commandButton action="#{accountController.update()}" value="Update" styleClass="button-blue"/>
                                  <h:commandButton type="reset" value="Refresh" styleClass="button-white"/>
                            </div>
              
            </h:form>   
                </div>
            </div>
              </div>
        </ui:define>
    </ui:composition>

</html>
